<template>
  <div class="gdap-history">
            <el-button type="success" round icon="el-icon-back" @click="gohome">
        返回首页
      </el-button>
          <p style="  font-family:SiYuanBold;color:rgb(207, 139, 50);font-size:30px;text-align: center;">个人信息</p>
          <!-- <p style="color: rgb(187, 187, 187); min-width: 10px; min-height: 10px;font-family: Oswald;ont-size: 12px;text-align: center;">PERSONAL INFORMATION</p> -->
          <!-- <p class="xx">Here's your message.</p> -->
          <div class="z"><img src="./abc.png" style=" width: 100%;height: auto;"></div>
          <!-- <div style="width:664.38px;height:170px;margin:-60vh 100vh;">
            <p class="b" >INFORMATION</p>
          </div> -->
          <div style="width:30%;height:45vh;margin:-20% 50%;">
        <el-row>
          <p style=" font-family:SiYuanBold;color:rgb(207, 139, 50);font-size:1.5em;position:absolut">修改信息</p>
          <el-col :span="44">
            <el-form  :inline="true" :model="fromLine" style="margin-top:-2vh;">
              <el-form-item>
                <el-select  v-model="fromLine.language" placeholder="语种" style="width:15vh">
                  <el-option v-for="item in languageList" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-select  v-model="fromLine.category" placeholder="科类" style="width:15vh">
                  <el-option  v-for="item in categoryList" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button   type="primary" @click="fnModify" icon="el-icon-search" >修改</el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
        <el-row>
          <p style="font-family:SiYuanBold;color:rgb(207, 139, 50);font-size:1.5em;">修改密码</p>
          <el-col :span="20">
            <el-form  :model="resetPaswdFrom" :rules="rulesReset" status-icon ref="resetPaswdFrom" label-width="30%"
               class="demo-ruleForm">
              <el-form-item  prop="currentPassword">
                <el-input type="password" v-model="resetPaswdFrom.currentPassword" autocomplete="off"
                  placeholder="当前密码" style="margin-left:-45%; "></el-input>
              </el-form-item>
              <el-form-item prop="password">
                <el-input type="password" v-model="resetPaswdFrom.password" autocomplete="off" placeholder="新密码" style="margin-left:-45%;">
                </el-input>
              </el-form-item>
              <el-form-item style="font-size:12px" prop="passwordCheck">
                <el-input type="password" v-model="resetPaswdFrom.passwordCheck" autocomplete="off" placeholder="确认密码" style="margin-left:-45%;">
                </el-input>
              </el-form-item>
              <div style="text-align: left;">
                <el-button  @click="reSetPaswdFrom('resetPaswdFrom')" style="margin-left:-0.5vh">取     消</el-button>
                <el-button type="primary" @click="fnResetpasswd('resetPaswdFrom')">修改密码
                </el-button>

              </div>
            </el-form>
          </el-col>
        </el-row>   
     </div>
  </div>
</template>
<script>
  import {
    languageList,
    categoryList
  } from "../../constants/constants"
  import api from '@/utils/api'
  export default {
    data() {
      var validatePassReset2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'))
        } else if (value !== this.resetPaswdFrom.password) {
          callback(new Error('两次输入密码不一致!'))
        } else {
          callback()
        }
      }
      return {
        languageList: languageList,
        categoryList: categoryList,
        username: '',
        examYear: '2018',
        fromLine: {
          language: '汉语言',
          category: '1'
        },
        resetPaswdFrom: {
          currentPassword: "",
          password: "",
          passwordCheck: "",
        },
        rulesReset: {
          currentPassword: [{
              required: true,
              message: '请输入密码',
              trigger: 'blur'
            },
            {
              min: 6,
              max: 18,
              message: '长度在6到18个字符',
              trigger: 'blur'
            }
          ],
          password: [{
              required: true,
              message: '请输入密码',
              trigger: 'blur'
            },
            {
              min: 6,
              max: 18,
              message: '长度在6到18个字符',
              trigger: 'blur'
            }
          ],
          passwordCheck: [{
            required: true,
            validator: validatePassReset2,
            trigger: 'blur'
          }]
        }
      }
    },
    methods: {
                  gohome(){
         this.$router.push('/');
      },
      fnModify() {
        var searchConditionArray = new Array();
        var item = {};
        item.fieldName = "userId";
        item.constraint = "EQUALS";
        item.inputType = "input";
        item.fieldValue = this.username;
        searchConditionArray.push(item);

        var updateList = new Array();
        var item = {};
        item.fieldName = "kldm";
        item.inputType = '';
        item.fieldValue = this.fromLine.category;
        updateList.push(item);

        var item = {};
        item.fieldName = "yzmc";
        item.inputType = '';
        item.fieldValue = this.fromLine.language;
        updateList.push(item);
        var params = "searchCond=" + JSON.stringify(searchConditionArray) + "&" + "updateList=" + JSON.stringify(
          updateList);
        api({
            url: '/nceeSysMgr/rest/data/updateByCondUtil/UserLogin',
            method: 'post',
            data: params
          })
          .then(res => {
            console.log(res);

            if (res.status == 200) {
              if (res.data == "success") {
                this.getUserInfo()
                this.$message({

                  message: '修改考生信息成功！',
                  type: 'success'
                });

              } else {
                this.$message({
                  message: '修改信息失败，请稍后再试或联系管理员',
                  type: 'warning'
                });

              }
            }
          })
          .catch(e => {
            console.error(e)
          })
      },
      reSetPaswdFrom(formName) {
        this.$refs[formName].resetFields();
      },
      fnResetpasswd(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            api({
              url: "/nceeSysMgr/rest/LoginUtil/gkUpdatePwd",
              method: "post",
              data: { 
            userId: this.username,
            oldPwd: this.resetPaswdFrom.currentPassword,
            newPwd: this.resetPaswdFrom.password
              }
            }).then(res => {
              if (res.status == 200) {
                console.log(res);
                switch (res.data) {
                  case 0:
                    this.$message({
                      message: '修改密码失败，请稍后再试或联系管理员！',
                      type: 'error'
                    });
                    break;
                  case 1:
                    this.$refs[formName].resetFields()
                    this.$message({
                      message: '修改密码成功!',
                      type: 'success',
                    });
                    break;
                  case -1:
                    this.$message({
                      message: '原始密码输入错误，请重新输入!',
                      type: 'warning'
                    });
                    this.reSetRegisFrom('registerForm')
                    break;
                  default:
                    break;
                }

              }
            });

          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      getUserInfo() {
        api({
          url: "/nceeSysMgr/rest/LoginUtil/getUserInfo",
          method: "get",
        }).then(res => {
          console.log(res.data);
          if (res.data !== null && res.data !== "") {
            const user = JSON.stringify(res.data)
            localStorage.setItem("user", user)
            var data = JSON.parse(localStorage.getItem("user"))
            this.fromLine.language = data.yzmc
            this.fromLine.category = data.kldm
            this.username = data.userId

          }
        });
      }
    },
    mounted() {

      var data = JSON.parse(localStorage.getItem("user"))
      console.log(data)
      this.fromLine.language = data.yzmc
      this.fromLine.category = data.kldm
      this.username = data.userId

    },
  }
</script>
<style scoped>
  .gdap-history {
    width: 100%;
    margin: 5px auto;
    height: 80vh;
    opacity: 1;
    background-image: url("bg.jpg");
    overflow-y: auto;
  }
.xx {
    position: absolute;
    bottom: auto;
    width: 400px;
    margin: 8vh 18vh;
    letter-spacing: 0.2em;
    display: inline-block;
    -webkit-transform: rotate(-90deg) scale(1) translate(0px, 0px);
    -ms-transform: rotate(-90deg) scale(1) translate(0px, 0px);
    transform: rotate(-90deg) scale(1) translate(0px, 0px);
    transition: all 0s ease;
    top: 180px;
    text-transform: uppercase;
    font-family: Oswald;
    color: #555;
}
.b {
    font-size: 100px;
    font-family: Oswald;
    text-transform: uppercase;
    line-height: 1em;
    margin-bottom: 0px;
    position: absolute;
    top: 15vh;
    z-index: 0;
    opacity: 0.2;
    font-weight:bold;
    color: rgb(204, 204, 204);
}

 .hh {
    background: #fff;
    border-radius: 0;
    border: 1px solid #DCDFE6;
    box-sizing: border-box;
    cursor: pointer;
    min-width: 160px;
    color: #555;
  }
.z{
 width: 20%;
 height: auto;
  margin:5vh 25%;

  /* background-image: url("abc.png"); */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.el-form {
    display: block;
    margin-top: 0em;
}

input, button, select, textarea {
    outline: none;
}
.el-input.el-select{
  display: block;
    width: 100%;
    height: 38px;
    padding: 8px 12px;
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    border: 1px solid #ccc;
    background-color: transparent;
    border-style: none none solid;
    border-bottom-color: rgba(204, 204, 204, 0.4);
    margin-bottom: 10px;
    padding-bottom: 15px;
    padding-top: 15px;
    height: 45px;
    color: #999;
}
.el-input__inner{
  border: none !important;
}
</style>